<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="哈哈大王">
		<meta name="Keywords" content="背景样式">
		<meta name="Description" content="背景样式">
		<title>第七课背景样式作业</title>
		<style>
		    *{margin:0px;padding:0px;}
		     .text-one{display:inline-block;width:400px;height:700px;margin:50px 100px;/* background-color:red; */overflow:hidden;
			 }
			 .content-title{width:360px;
			                         height:60px;
			                         margin:10px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 /* background-repeat:no-repeat; */background-size:1px 200px;background-position:10px 50px;
			 }
			 .content-title>span{margin-left:20px ;font-family:"微软雅黑";font-size:22px;
			 }
			  .content-1{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px 6px;}
			 .content-2{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									 /* background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -37px;}
			.content-3{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									 /* background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -79px;}
			.content-4{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
						/* 			 background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -121px;}
			.content-5{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -164px;}
			.content-6{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -207px;}
			.content-7{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -250px;}
			.content-8{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -293px;}
			.content-9{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:1px -334px;}
			.content-10{width:360px;
			                         height:40px;
			                         margin:20px;
									 background-image:url(../static/image/1.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat;  background-size:30px ; background-position:6px -379px;}

			 span{margin-left:40px ;font-family:"微软雅黑";font-size:18px;line-height:36px;}
			 .text-two{display:inline-block; width:400px;height:700px;margin:50px 100px;background-color:pink; overflow:hidden;
			 }
			 .content-pct1{width:40px;
			                         height:40px;
			                         margin:220px auto 0px;
									 background-image:url(../static/image/2.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat; /*  background-size:100% 100%; */ background-position:-80px -277px;
									 }
			.content-pct2{width:40px;
			                         height:40px;
			                         margin:10px auto 0px;
									 background-image:url(../static/image/2.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat; /*  background-size:100% 100%; */ background-position:0px -201px;
									 }
			.content-pct3{width:40px;
			                         height:40px;
			                         margin:10px auto 0px;
									 background-image:url(../static/image/2.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat; /*  background-size:100% 100%; */ background-position:0px -240px;
									 }
			.content-pct4{width:40px;
			                         height:40px;
			                         margin:10px auto 0px;
									 background-image:url(../static/image/2.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat; /*  background-size:100% 100%; */ background-position:0px -320px;
									 }
			.content-pct5{width:40px;
			                         height:40px;
			                         margin:10px auto 50px;
									 background-image:url(../static/image/2.png);
									/*  background-color:snow; */
									 background-repeat:no-repeat; /*  background-size:100% 100%; */ background-position:0px 0px;
									 }

		</style>
	</head>
	<body>
		<div class="text-one">
		      <div class="content-title">
			      <span>潮流元素</span><span>Most Read</span>
			  </div>
			  <div class="content-1">
			      <span>啦啦啦一大堆话</span>
			  </div>
			   <div class="content-2">
			      <span>啦啦啦一大堆话</span>
			  </div>
			   <div class="content-3">
			      <span>啦啦啦一大堆话</span>
			  </div>
			   <div class="content-4">
			      <span>啦啦啦一大堆话</span>
			  </div>
			   <div class="content-5">
			      <span>啦啦啦一大堆话</span>
			  </div>
			   <div class="content-6">
			      <span>啦啦啦一大堆话</span>
			  </div>
			  <div class="content-7">
			      <span>啦啦啦一大堆话</span>
			  </div>
			  <div class="content-8">
			      <span>啦啦啦一大堆话</span>
			  </div>
			  <div class="content-9">
			      <span>啦啦啦一大堆话</span>
			  </div>
			  <div class="content-10">
			      <span>啦啦啦一大堆话</span>
			  </div>
		</div>
		<div class="text-two">
		     <div class="content-pct1">
			      
			  </div>
			  <div class="content-pct2">
			      
			  </div>
			  <div class="content-pct3">
			      
			  </div>
			  <div class="content-pct4">
			      
			  </div>
			  <div class="content-pct5">
			      
			  </div>
		</div>
	</body>
</html>
